<template>
  <div class="attachment-wrapper">
    <div class="attachment-box" id="attachment-box"></div>
  </div>
</template>
<script>
import SVG from "svg";
import { constants } from "zlib";
export default {
  name: "Index", // 关于我们
  data() {
    return {
      text:
        "安徽省极度恐慌江安河环境啊看回到家客户卡较好的家环境打开花就开始打驾考山东矿机哈卡安徽省极度恐慌江安河环境啊看回到家客户卡较好的家环境打开花就开始打驾考山东矿机哈卡安徽省极度恐慌江安河环境啊看回到家客户卡较好的家环境打开花就开始打驾考山东矿机哈卡",
      options: {
        lineHeight: "30",
        Timer2: null //
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let dom = document.getElementById("attachment-box");
      let draw = SVG(dom)
        .size(700, 500)
        .attr({ id: "_draw" }); // 初始化
      let defaultGroup = draw.group().attr({ id: "defaultGroup" }); // 创建一个组别，里面存储 img 和 标注属性 用来缩放等

      let textList = [];
      let len = Math.ceil(this.text.length / 38);
      for (var i = 0; i < len; i++) {
        textList[i] = this.text.slice(i * 38, (i + 1) * 38);
      }
      ////
      textList.forEach((item, ind) => {
        let _group = draw.group(); // 创建一个组别，里面存储 img 和 标注属性 用来缩放等
        _group.on('mouseup', (e) => {
          this.editMousrUp(e)
        })
        // 设置文字lineheight
        _group.transform({
          x: 0,
          y: this.options.lineHeight * ind
        });
        let txt = draw.text((add)=>{
          add.tspan(item).data('key', ind).newLine();
        })
        _group.add(txt);
        defaultGroup.add(_group);
      });
    },
    /**
     * 所有事件
     */
    // 所有事件
    selectEvent() {},
    /**
     * 鼠标抬起事件
     */
    editMousrUp(e) {
      clearTimeout(this.Timer2);
      this.Timer2 = setTimeout(() => {
        this.getSelectInfo()
      }, 10);
    },
    // 获取光标
    getSelect() {
      if (window.getSelection) {
        let sel = window.getSelection();
        if (sel.rangeCount > 0) {
          return sel.getRangeAt(0);
        }
      } else if (document.selection) {
        /* IE下的处理 */
        return document.selection.createRange();
      }
      return null;
    },
    /**
     * 获取光标选择文本及偏移量
     */
    getSelectInfo(){
      let select = this.getSelect();
      let outBox = document.getElementById('attachment-box')
      let clientRect = select.getBoundingClientRect()
      let outclientRect = outBox.getBoundingClientRect()
      let outLeft = outclientRect.left
      let outRight = outclientRect.right
      let left = clientRect.left
      let right = clientRect.right

      let offsetL = left - outLeft
      let offsetR = outRight - right
      let infoString = select.toString();

      let startNode = select.startContainer.parentElement
      let endNode = select.endContainer.parentElement
      console.log(SVG.get(startNode.id).data('key'), SVG.get(endNode.id).data('key'))
      return {
        text: infoString,
        left: offsetL,
        right: offsetR,
        // startInd: 
      }
    }
  },
  components: {}
};
</script>
<style lang="less" scoped>
.attachment-wrapper {
  width: 100%;
  height: 100%;
  .attachment-box {
    width: 700px;
    margin: auto;
  }
}
</style>
